<template>
  <div class="goods_specs">
    <div class="gs_item">
      <div class="gs_left">
        <div>规格1</div>
        <span>规格至少填写1个</span>
      </div>
      <div class="gs_right">
        <el-select v-model="skuSaleAttr1" placeholder="请选择" :disabled="readOnly || isModify">
          <el-option v-for="(item, index) in specsOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.value === skuSaleAttr2" />
        </el-select>

        <DynamicParams ref="specsOptions1" :template="{value:null}" :data="specsData1"
          :operation=$.DPOperation(readOnly) addText="添加选项">
          <el-table-column label="选项" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.value" placeholder="请输入"
                :disabled="readOnly || $.isNotEmpty(scope.row.oldValue)" />
            </template>
          </el-table-column>
        </DynamicParams>
      </div>
    </div>
    <br />
    <div class="gs_item">
      <div class="gs_left">
        <div>规格2</div>
        <span>规格至少填写1个</span>
      </div>
      <div class="gs_right">
        <el-select v-model="skuSaleAttr2" placeholder="请选择" :disabled="readOnly || isModify">
          <el-option v-for="(item, index) in specsOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.value === skuSaleAttr1" />
        </el-select>
        <DynamicParams ref="specsOptions2" :template="{value:null}" :data="specsData2"
          :operation=$.DPOperation(readOnly) addText="添加选项">
          <el-table-column label="选项" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.value" placeholder="请输入"
                :disabled="readOnly || $.isNotEmpty(scope.row.oldValue)" />
            </template>
          </el-table-column>
        </DynamicParams>
      </div>
    </div>
    <!-- <div @click="getValue">aaaaaaa</div> -->
  </div>

</template>

<script setup>
import DynamicParams from "@com/DynamicParams.vue";
import { $msg } from "@ui/msg";
import $ from "@util/base"
import { ref, defineProps, watch, defineExpose } from "vue"

const props = defineProps({
  data: { type: Object },
  specs: { type: Array },
  readOnly: { type: Boolean, default: false },
  isModify: { type: Boolean, default: false }
});
const specsOptions = ref([])
watch(() => props.specs, val => { specsOptions.value = val })
watch(() => props.data, val => {
  skuSaleAttr1.value = val.skuSaleAttr1
  skuSaleAttr2.value = val.skuSaleAttr2
  specsData1.value = hadnerSpecsData(val.skuSaleAttr1Value)
  specsData2.value = hadnerSpecsData(val.skuSaleAttr2Value)
})

const specsOptions1 = ref(null)
const specsOptions2 = ref(null)
const skuSaleAttr1 = ref(props.data.skuSaleAttr1)
const skuSaleAttr2 = ref(props.data.skuSaleAttr2)
const specsData1 = ref(hadnerSpecsData(props.data.skuSaleAttr1Value))
const specsData2 = ref(hadnerSpecsData(props.data.skuSaleAttr2Value))

function hadnerSpecsData(value) {
  if ($.isNotEmpty(value)) {
    return value.map(e => { return { value: e, oldValue: e } })
  } else {
    return []
  }
}

function hasEqualElement(val) {
  const s = new Set()
  val.forEach(e => { s.add(e) })
  return val.length !== s.size
}

function getValue() {
  let s1 = skuSaleAttr1.value
  let s2 = skuSaleAttr2.value
  // console.log(specsOptions1.value.getValue())
  let so1 = specsOptions1.value.getValue().remove(e => { return $.isEmpty(e.value) })
  let so2 = specsOptions2.value.getValue().remove(e => { return $.isEmpty(e.value) })

  if ($.isNotEmpty(so1)) {
    so1 = so1.map(e => { return e.value })
    if (hasEqualElement(so1)) {
      $msg.error(s1 + "规格有重复的选项");
      return false
    }
  } else {
    so1 = null
  }
  if ($.isNotEmpty(so2)) {
    so2 = so2.map(e => { return e.value })
    if (hasEqualElement(so2)) {
      $msg.error(s2 + "规格有重复的选项");
      return false
    }
  } else {
    so2 = null
  }
  if (($.isNotEmpty(s1) && $.isNotEmpty(so1)) || ($.isNotEmpty(s2) && $.isNotEmpty(so2))) {
    return { skuSaleAttr1: s1, skuSaleAttr2: s2, skuSaleAttr1Value: so1, skuSaleAttr2Value: so2 }
  } else {
    $msg.error("规格至少填写1个");
    return false
  }
}
defineExpose({ getValue })
</script>
<style lang="scss">
.goods_specs {
  .gs_item {
    display: flex;

    &:first-child {
      margin-bottom: 10px;
    }
  }

  .gs_left {
    width: 120px;
    text-align: right;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    height: 32px;
    line-height: 32px;
    padding: 0 12px 0 0;

    span {
      font-size: var(--el-font-size-base);
      color: var(--el-text-color-regular);
      line-height: 1.3;
    }
  }

  .gs_right {
    width: calc(100% - 120px);
  }

  .el-select {
    width: 350px;
    margin-bottom: 20px;
  }
}
</style>